<template>
    <div id="cesiumContainer"></div>
</template>
<script lang="ts" setup>
import * as Cesium from 'cesium';
const init = () => {
    const viewer = new Cesium.Viewer('cesiumContainer');
    viewer.entities.add({
        name: 'Red box with black outline',
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        box: {
            dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
            material: Cesium.Color.RED.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK
        }
    });

    viewer.zoomTo(viewer.entities);
};
onMounted(()=>{
    init()
})
</script>
<style lang="scss" scoped></style>
